<template>
 <el-form :model="advancedForm" label-width="90px" class="search-form">
          <!-- 修改：将优先显示部分改为单选按钮 -->
          <el-form-item label="查询指标">
            <el-radio-group v-model="orderField" size="small" class="maincol">
              <el-radio label="hs">按主要商品查询</el-radio>
              <el-radio label="country">按贸易伙伴查询</el-radio>
              <el-radio label="port">按收发货地区查询</el-radio>
              <el-radio label="mode">按贸易方式查询</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 如果优先是 mode -->
          <template v-if="orderField === 'mode'">
            <el-form-item label="贸易方式">
              <el-select
                v-model="advancedForm.tradeType"
                placeholder="请选择贸易方式"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in TradeDetailTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="主要商品">
              <el-popover
                v-model:visible="showHsTree"
                trigger="manual"
                placement="right-start"
                :width="650"
                :height="350"
              >
                <div class="hs-popover-content">
                  <Hstree @selection-change="onHsselection" />
                </div>
                <template #reference>
                  <el-switch
                    v-model="showHsTree"
                    active-text="选择HS编码"
                    size="small"
                  />
                </template>
              </el-popover>

              <el-popover class="box-item" placement="right" :width="280">
                <template #reference>
                  <el-button type="text" class="btn-small">
                    已选HS编码
                  </el-button>
                </template>

                <div class="selected-hs-popover">
                  <div v-if="SonhsData.length === 0" class="empty-tip">
                    暂无已选HS编码
                  </div>
                  <div v-else class="hs-list">
                    <div
                      v-for="(item, index) in SonhsData"
                      :key="index"
                      class="hs-item"
                    >
                      {{ item.label }}
                    </div>
                  </div>
                </div>
              </el-popover>
            </el-form-item>

            <el-form-item label="贸易伙伴">
              <el-select
                v-model="advancedForm.partner"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in PartnerTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="收发货地址">
              <el-select
                v-model="advancedForm.address"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in AdressTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </template>

          <!-- 如果优先是 hs -->
          <template v-else-if="orderField === 'hs'">
            <el-form-item label="主要商品">
              <el-popover
                v-model:visible="showHsTree"
                trigger="manual"
                placement="right-start"
                :width="650"
                :height="350"
              >
                <div class="hs-popover-content">
                  <Hstree @selection-change="onHsselection" />
                </div>
                <template #reference>
                  <el-switch
                    v-model="showHsTree"
                    active-text="选择HS编码"
                    size="small"
                  />
                </template>
              </el-popover>

              <el-popover class="box-item" placement="right" :width="280">
                <template #reference>
                  <el-button type="text" class="btn-small">
                    已选HS编码
                  </el-button>
                </template>

                <div class="selected-hs-popover">
                  <div v-if="SonhsData.length === 0" class="empty-tip">
                    暂无已选HS编码
                  </div>
                  <div v-else class="hs-list">
                    <div
                      v-for="(item, index) in SonhsData"
                      :key="index"
                      class="hs-item"
                    >
                      {{ item.label }}
                    </div>
                  </div>
                </div>
              </el-popover>
            </el-form-item>

            <el-form-item label="贸易伙伴">
              <el-select
                v-model="advancedForm.partner"
                placeholder="请选择国家/地区"
                multiple
                collapse-tags
                collapse-tags-tooltip
                clearable
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in PartnerTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="收发货地址">
              <el-select
                v-model="advancedForm.address"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in AdressTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="贸易方式">
              <el-select
                v-model="advancedForm.tradeType"
                placeholder="请选择贸易方式"
                multiple
                collapse-tags
                collapse-tags-tooltip
                clearable
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in TradeDetailTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </template>

          <!-- 如果优先是 country -->
          <template v-else-if="orderField === 'country'">
            <el-form-item label="贸易伙伴">
              <el-select
                v-model="advancedForm.partner"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in PartnerTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="主要商品">
              <el-popover
                v-model:visible="showHsTree"
                trigger="manual"
                placement="right-start"
                :width="650"
                :height="350"
              >
                <div class="hs-popover-content">
                  <Hstree @selection-change="onHsselection" />
                </div>
                <template #reference>
                  <el-switch
                    v-model="showHsTree"
                    active-text="选择HS编码"
                    size="small"
                  />
                </template>
              </el-popover>

              <el-popover class="box-item" placement="right" :width="280">
                <template #reference>
                  <el-button type="text" class="btn-small">
                    已选HS编码
                  </el-button>
                </template>

                <div class="selected-hs-popover">
                  <div v-if="SonhsData.length === 0" class="empty-tip">
                    暂无已选HS编码
                  </div>
                  <div v-else class="hs-list">
                    <div
                      v-for="(item, index) in SonhsData"
                      :key="index"
                      class="hs-item"
                    >
                      {{ item.label }}
                    </div>
                  </div>
                </div>
              </el-popover>
            </el-form-item>

            <el-form-item label="收发货地址">
              <el-select
                v-model="advancedForm.address"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in AdressTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="贸易方式">
              <el-select
                v-model="advancedForm.tradeType"
                placeholder="请选择贸易方式"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in TradeDetailTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </template>

          <!-- 如果优先是 port -->
          <template v-else-if="orderField === 'port'">
            <el-form-item label="收发货地址">
              <el-select
                v-model="advancedForm.address"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in AdressTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="主要商品">
              <el-popover
                v-model:visible="showHsTree"
                trigger="manual"
                placement="right-start"
                :width="650"
                :height="350"
              >
                <div class="hs-popover-content">
                  <Hstree @selection-change="onHsselection" />
                </div>
                <template #reference>
                  <el-switch
                    v-model="showHsTree"
                    active-text="选择HS编码"
                    size="small"
                  />
                </template>
              </el-popover>

              <el-popover class="box-item" placement="right" :width="280">
                <template #reference>
                  <el-button type="text" class="btn-small">
                    已选HS编码
                  </el-button>
                </template>

                <div class="selected-hs-popover">
                  <div v-if="SonhsData.length === 0" class="empty-tip">
                    暂无已选HS编码
                  </div>
                  <div v-else class="hs-list">
                    <div
                      v-for="(item, index) in SonhsData"
                      :key="index"
                      class="hs-item"
                    >
                      {{ item.label }}
                    </div>
                  </div>
                </div>
              </el-popover>
            </el-form-item>

            <el-form-item label="贸易伙伴">
              <el-select
                v-model="advancedForm.partner"
                placeholder="请选择国家/地区"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in PartnerTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="贸易方式">
              <el-select
                v-model="advancedForm.tradeType"
                placeholder="请选择贸易方式"
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                class="select-small"
              >
                <el-option
                  v-for="item in TradeDetailTypeOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </template>

          <!-- 通用：时间范围 -->
          <el-form-item label="起止时间">
            <div class="date-type-group">
              <el-radio-group v-model="advancedForm.dateMode" size="small">
                <el-radio label="year">按年</el-radio>
                <el-radio label="month">按月</el-radio>
              </el-radio-group>
            </div>
            <div class="date-pickers">
              <el-date-picker
                v-for="(field, idx) in advancedDateFields"
                :key="field"
                v-model="advancedForm[field]"
                :type="advancedForm.dateMode"
                :placeholder="advancedPickerPlaceholders[idx]"
                :disabled-date="disabledAdvancedDate"
                class="date-picker"
              />
            </div>
          </el-form-item>

          <el-form-item label="进出口类型">
            <el-select
              v-model="advancedForm.type"
              multiple
              clearable
              placeholder="请选择"
              class="select-small"
            >
              <el-option
                v-for="item in tradeTypeOptions"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="计算方式">
            <el-select
              v-model="advancedForm.statisticsType"
              multiple
              placeholder="请选择计算方式"
              clearable
              class="select-small"
            >
              <el-option
                v-for="item in calculationTypeOptions"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>

          <!-- 通用：其他数值 -->
          <el-form-item label="其他数值">
            <el-checkbox-group v-model="advancedForm.others">
              <el-checkbox
                v-for="item in checkList"
                :key="item.code"
                :label="item.label"
                :value="item.code"
                class="checkbox-small"
              />
            </el-checkbox-group>
          </el-form-item>

          <!-- 通用：操作按钮 -->
          <el-form-item class="form-actions">
            <el-button class="" @click="onAdvancedReset">取消</el-button>
            <el-button type="primary" @click="onAdvancedConfirm">
              搜索</el-button
            >
          </el-form-item>
        </el-form>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { QueryDataApi } from '../../api/Data'
import { toYearDate, toMonthDate, formatYear, formatYearMonth } from '../../utils/dateUtils'
import Hstree from './CHHstree.vue'

const emit = defineEmits(['detail-search'])

// 表单模型
const advancedForm = ref({
  partner: [],
  address: [],
  tradeType: [],
  dateMode: 'year',
  yearStart: null,
  yearEnd: null,
  yearMonthStart: null,
  yearMonthEnd: null,
})

// 单选指标
const orderField = ref('hs')

// 下拉选项
const TradeDetailTypeOptions = ref([])
const PartnerTypeOptions = ref([])
const AdressTypeOptions = ref([])
const tradeTypeOptions=ref([])
const calculationTypeOptions = ref([])
const checkList = ref([])

// HS 树
const showHsTree = ref(false)
const SonhsData = ref([])

// 时间范围限制
let minYear, maxYear, minYearMonth, maxYearMonth

// 禁用日期逻辑
const disabledAdvancedDate = (date) => {
  const y = date.getFullYear()
  if (advancedForm.value.dateMode === 'year') {
    return y < minYear || y > maxYear
  }
  const code = y * 100 + date.getMonth() + 1
  return code < minYearMonth || code > maxYearMonth
}

// 依据 dateMode 计算要渲染的字段和 placeholder
const advancedDateFields = computed(() =>
  advancedForm.value.dateMode === 'year'
    ? ['yearStart', 'yearEnd']
    : ['yearMonthStart', 'yearMonthEnd']
)
const advancedPickerPlaceholders = computed(() =>
  advancedForm.value.dateMode === 'year'
    ? ['开始年份', '结束年份']
    : ['开始月份', '结束月份']
)

// HS 选中回调
const onHsselection = (items) => {
  SonhsData.value = items
}

// 搜索按钮
const onAdvancedConfirm = () => {
  const payload = {
    mainCol: orderField.value,
    partner: advancedForm.value.partner,
    address: advancedForm.value.address,
    mode: advancedForm.value.tradeType,
    hs: SonhsData.value.map(i => i.code),
    timeType: advancedForm.value.dateMode,
    timeStart: advancedForm.value.dateMode === 'year'
      ? formatYear(advancedForm.value.yearStart)
      : formatYearMonth(advancedForm.value.yearMonthStart),
    timeEnd: advancedForm.value.dateMode === 'year'
      ? formatYear(advancedForm.value.yearEnd)
      : formatYearMonth(advancedForm.value.yearMonthEnd),
    pageNum: 1,
    pageSize: 20
  }
  emit('detail-search', payload)
}

// 重置按钮
const onAdvancedReset = () => {
  Object.assign(advancedForm.value, {
    partner: [], address: [], tradeType: [],
    dateMode: 'year',
    yearStart: minYear ? toYearDate(maxYear) : null,
    yearEnd: minYear ? toYearDate(maxYear) : null,
    yearMonthStart: minYearMonth ? toMonthDate(maxYearMonth) : null,
    yearMonthEnd: minYearMonth ? toMonthDate(maxYearMonth) : null,
  })
  orderField.value = 'hs'
  SonhsData.value = []
}

onMounted(async () => {
  // 获取时间范围
  const { data } = await QueryDataApi.getDate()
  const d = data.timeRangeChina
  minYear = d.yearStart; maxYear = d.yearEnd
  minYearMonth = d.yearMonthStart; maxYearMonth = d.yearMonthEnd
  // 初始化 time pickers
  advancedForm.value.yearStart = toYearDate(maxYear)
  advancedForm.value.yearEnd = toYearDate(maxYear)
  advancedForm.value.yearMonthStart = toMonthDate(maxYearMonth)
  advancedForm.value.yearMonthEnd = toMonthDate(maxYearMonth)

  // 获取其余下拉选项
  const [modeRes, partnerRes, addrRes] = await Promise.all([
    QueryDataApi.getTradeDetailType(),
    QueryDataApi.getPartnerType(),
    QueryDataApi.getAddressType()
  ])
  TradeDetailTypeOptions.value = Object.values(modeRes.data.mode || {})
  PartnerTypeOptions.value = Object.values(partnerRes.data.country || {})
  AdressTypeOptions.value = Object.values(addrRes.data.port || {})




  QueryDataApi.getOtherType().then((res) => {
    checkList.value = Object.values(res.data.dataCol || {});
  });
  QueryDataApi.getTradeType().then((res) => {
    const options = Object.values(res.data.exIm || {});
    tradeTypeOptions.value = options;

   
  });
  QueryDataApi.getCalculationType().then((res) => {
    const options = Object.values(res.data.statisticsType || {});
    calculationTypeOptions.value = options;


  });
})
</script>

<style lang="scss" scoped>
.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  align-items: start;

  .maincol ::v-deep .el-radio__label {
    width: 90px;
  }
}

.date-type-group {
  margin-bottom: 4px;
  .el-radio__label {
    font-size: 12px;
  }
}

.date-pickers {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  .date-picker {
    width: 160px; /* 缩小日期框 */
    font-size: 12px; /* 调小日期选择器字体 */
  }


.select-small {
  font-size: 12px;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
</style>
